<template>
	<view class="pk-detail-con">
		<i class="lightning" :style="{ left: line+ '%' }"></i>
		<i class="acimgs" :style="{ left: line+ '%' }"></i>

		<view class="progress" v-if="pkData.showResult">
			<view class="progress-bar" :style="{ width: line + '%'}"></view>
			<span class="team-name team-l">{{pkData.leftLabel}}({{line}}%)</span>
			<span class="team-name team-r">{{pkData.rightLabel}}({{100 -line}}%)</span>
		</view>

		<view class="progress" @tap="changeRight()" v-else>
			<view class="progress-bar" :style="{ width: line + '%'}" @tap="changeLeft()"></view>
			<span class="team-name team-l">{{pkData.leftLabel}}</span>
			<span class="team-name team-r">{{pkData.rightLabel}}</span>
		</view>
		
		<view class="pk-tip" >
			<span>{{pkData.totalNum}}人参与<text v-if="pkData.showResult != true">，选择后可查看结果</text></span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pk-bar",
		props: {
			pkData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				line: 50,
			};
		},
		mounted() {
			this.initPkData()
		},
		methods: {
			initPkData() {
				let {
					left,
					right,
					showResult
				} = this.pkData;
				if (showResult) {
					if (left >= right) {
						this.line = (left / (right + left) * 100).toFixed(1);
					} else {
						this.line = (100 - (right / (right + left) * 100)).toFixed(1);
					}
				}
			},
			changeLeft() {
				this.pkData = {
					left: 400,
					right: 232,
					leftLabel: '支持',
					rightLabel: '反对',
					showResult: true,
					totalNum: '100W'
				}
				this.initPkData()
			},
			changeRight() {
				console.info('----right')
			},
		}
	}
</script>

<style lang="less">
	.pk-detail-con {
		position: relative;
		margin: 28rpx auto 15rpx;
	}

	.progress {
		width: 100%;
		height: 70rpx;
		overflow: hidden;
		border-radius: 20rpx;
		background: linear-gradient(-142deg, #FF0000, #E58F8C);
	}

	.progress-bar {
		position: relative;
		height: 70rpx;
		text-align: left;
		background: linear-gradient(-135deg, #00D6FF, #0024FF);
	}

	.progress,
	.progress-bar {
		position: relative;
	}

	.lightning {
		position: absolute;
		top: -40rpx;
		z-index: 9;
		width: 70rpx;
		height: 140rpx;
		float: right;
		margin-right: -12rpx;
		background: url("./progress.png") no-repeat center;
		background-size: cover;
		transform: translateX(-20rpx);
	}

	.acimgs {
		position: absolute;
		width: 58rpx;
		height: 70rpx;
		z-index: 9;
		background: linear-gradient(-135deg, #58e3ff, #0fb9ff);
		clip-path: polygon(0 0, 70% 0, 25% 100%, 0% 100%);
		transform: translateX(-10rpx);
	}

	.team-name {
		position: absolute;
		top: 0;
		line-height: 70rpx;
		color: #f3eee1;
		letter-spacing: 1rpx;
		font-size: 29rpx;
	}

	.team-l {
		left: 30rpx;
	}

	.team-r {
		right: 30rpx;
	}
	.pk-tip {
		margin: 8rpx 10rpx;
		text-align: center;
		font-size: 18rpx;
		color: #797979;
	}
	
</style>
